<template>
  <a-button :disabled="dmpPaint.zoom >= dmpPaint.maxZoom" @click="zoomCanvasIn">放大</a-button>
  <a-button :disabled="dmpPaint.zoom <= dmpPaint.minZoom" @click="zoomCanvasOut">缩小</a-button>
  <a-button @click="rotate">旋转</a-button>
  <a-button>缩小</a-button>
  <a-button @click="reset">重置</a-button>
  <br />
  <a-space>
    <span>zoom:{{ dmpPaint.zoom }}</span>
    <span>imgScale:{{ dmpPaint.imgScale }}</span>
    <span>angle:{{ dmpPaint.angle }}</span>
    <span>paintStatus:{{ dmpPaint.paintStatus }}</span>
  </a-space>
  <div ref="paintWrapperRef" class="w-1000 h-700" style="border: solid 1px red">
    <canvas ref="paintDomRef" width="400" height="200"></canvas>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue'

  import { DmpImgBasicPaint } from '@/utils/dmp-paint'

  const dmpPaint = ref(new DmpImgBasicPaint())

  watch(
    dmpPaint,
    val => {
      console.log(val)
    },
    { deep: true }
  )

  const paintDomRef = ref<HTMLCanvasElement>()
  const paintWrapperRef = ref<HTMLElement>()

  const zoomCanvasIn = () => {
    dmpPaint.value.zoomCanvasIn()
  }
  const zoomCanvasOut = () => {
    dmpPaint.value.zoomCanvasOut()
  }
  const rotate = () => {
    dmpPaint.value.rotate()
  }
  const reset = () => {
    dmpPaint.value.reset()
  }

  onMounted(async () => {
    if (paintDomRef.value && paintWrapperRef.value) {
      paintDomRef.value.width = paintWrapperRef.value.clientWidth
      paintDomRef.value.height = paintWrapperRef.value.clientHeight
      dmpPaint.value.init(paintDomRef.value)
      dmpPaint.value.loadImage('https://pic2.zhimg.com/v2-631633487d62b236755b80c81e8f5f86_r.jpg')
    }
  })
</script>

<style lang="less" scoped></style>
